<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref } from "vue";
import { Toast } from "vant";
import routes from "../config/routes"
const DEFAULT_TITLE = "伙伴匹配";
const router = useRouter();
const title = ref(DEFAULT_TITLE)
const onClickLeft = () => {
    router.back();
};
const onClickRight = () => {
    router.push({ path: "/inter/search" });
};
// 路由守卫，在切换路由之前
router.beforeEach((to, from) => {
    const toPath = to.path;
    const route = routes[1].children.find((route) => {
        return toPath == routes[1].path + '/'+route.path;
    })
    title.value = route?.title ?? DEFAULT_TITLE;
})
</script>

<template>
    <!-- 顶部导航栏NavBar -->
    <van-nav-bar
        :title="title"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    >
        <template #right>
            <span style="margin-right: 7px; color: skyblue;">伙伴搜索</span><van-icon name="search" size="18" />
        </template>
    </van-nav-bar>

    <!-- 内容Content -->
    <div id="content">
        <router-view />
    </div>

    <!-- 底部标签栏Tabbar -->
    <van-tabbar route>
        <van-tabbar-item to="/inter/index" icon="home-o" name="index"
            >主页</van-tabbar-item
        >
        <van-tabbar-item to="/inter/team" icon="search" name="team"
            >队伍</van-tabbar-item
        >
        <van-tabbar-item to="/inter/user" icon="friends-o" name="user"
            >个人</van-tabbar-item
        >
    </van-tabbar>
</template>

<style scoped>
    /* #content {
        padding-bottom: 80px;
    } */
</style>
